"Full animated Header + One-Page scroll effects [Free Feelings v.1]"
Bootstrap 3.3.0 Snippet by eXP Design

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Feelings v.1</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aclonica">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Aladin">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" data-aos="slide-right" data-aos-duration="2800" data-aos-once="true">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand navbar-link" target="blank" href="https://www.instagram.com/exp__designer/"><i class="material-icons">center_focus_weak</i></a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Explore <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="#">First Item</a></li>
<li role="presentation"><a href="#">Second Item</a></li>
<li role="presentation"><a href="#">Third Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
header {
height:100vh;
background-image:url('https://img2.picload.org/image/daapipii/header-2.jpg');
background-size:cover;
background-position:center center;
background-attachment:fixed;
}
@media (max-width:767px) {
header {
/*height:100%;*/
background-attachment:inherit;
height:100vh;
}
}
header .row {
margin-top:40vh;
}
@media (max-width:767px) {
header .row {
margin-top:30vh;
}
}
header h1 {
/*background-color:rgba(255,255,255,0.36);*/
padding:10px;
text-align:center;
border:5px solid rgba(108,111,119,0.19);
/*box-shadow:0px 0px 1px #333;*/
}
header h1 {
font-family:'Aladin';
font-size:71px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// Animation, to disable animation for mobile please write the *mobile* in *sr* on line 3
$(document).ready(function(){
AOS.init({ disable: 'sr' });
$('[data-bs-hover-animate]')
.mouseenter( function(){ var elem = $(this); elem.addClass('animated ' + elem.attr('data-bs-hover-animate')) })
.mouseleave( function(){ var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) });
});
// Scroll effect
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 PRO Angular
Animated Radio tab
Animated 3d social icon in css3
Bootstrap 4 Animated Dynamic Form

Questions / Comments:

New Full animated Header with One-Page scroll effect.

You can Download the Source here: https://mega.nz/#!uTBUkYiC!s7RMjL1Tl3pbOBEFUQDyxkOhJ0W-cebz1ZMw5PwcYVM

Include:

- Full Snippet

- PSD (Photoshop file) for Header background with forms

- Bootstrap Studio Project file for edit in Bootstrap Studio Software (you need version 2+)

Dize Design (1) - 7 years ago - Reply 1